<template>
  <div class="main">
    <div class="title">监 听 设 置</div>
    <div class="content">
      <div class="tables">
        <div class="showInfor">
          <span>监 听 设 备</span><input type="text" style="padding:0 1vw ;"/>
        </div>
        <div>
          <el-table
            :data="monitorTableData"
            border
            style="width: 100%; height: 100%; background: rgb(220, 220, 220)"
          >
            <el-table-column type="index" label="序号" min-width="20">
            </el-table-column>
            <el-table-column prop="num" label="设备号" min-width="40">
            </el-table-column>
            <el-table-column prop="name" label="设备名称" min-width="40">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="numberkey">
        <div class="showNum">
          <span>设 备 定 位（设备号）</span
          ><input type="text" :value="displayValue" style="padding: 0 1vw;"/>
        </div>
        <div class="compo">
          <NumberKeyboard
            :display="displayValue"
            @append="appendToMonistor"
            @value="holdeValue"
          ></NumberKeyboard>
        </div>
      </div>
    </div>
    <div class="buttons">
      <button>撤 销 监 听</button><button>保 存</button
      ><button @click="exit">退 出</button>
    </div>
  </div>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
import NumberKeyboard from "../../../../components/NumberKeyboard.vue";
import { onMounted, ref, watchEffect } from "vue";
import ClockSetting from "../../Sound_management/soundJumpToView/clockSetting.vue";
const router = useRouter();
const monitorTableData = ref([
  {
    num: "一号",
    name: "广播一号",
  },
]);

const holdeValue = (e) => {
  console.log("11", e);
  displayValue.value=e

};
const exit = () => {
  router.push({path:'/sheZhi',query:{data:'keyboard'}});
  console.log("-1")
};
const displayValue = ref("");
const appendToMonistor = (num) => {};
// onMounted(()=>{
//   console.log("router.currentRoute.value",router.currentRoute.value.query.displayValue)
//   displayValue.value=router.currentRoute.value.query.displayValue

//   watchEffect(()=>{
//     displayValue.value=router.currentRoute.value.displayValue
//   })
// })
</script>
<style scoped>
@import url("./general_settingJumpless/Monistor_Setting.less");
</style>
